<!--

VRF DATA

-->

<form ng-submit="submitForm()">

	<div class="options-group">
		<div class="options-content">
			<h3 class="options-group-heading" ng-show="method == 'add'">
				Properties of new VRF
			</h3>
			<h3 class="options-group-heading" ng-show="method == 'edit'">
				Properties of VRF {{ vrf.name }}
			</h3>

			<div class="option">
				<dl>
					<dt>
						RT
					</dt>
					<dd>
						<input type="text"
							name="rt"
							ng-model="vrf.rt"
							uib-tooltip="VRF RT (e.g. 123:4567 or 192.0.2.12:345).">
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
						Name <span class="required" uib-tooltip="This field is required, please fill in! :-)">*</span>
					</dt>
					<dd>
						<input type="text"
							name="name"
							ng-model="vrf.name"
							uib-tooltip="Name of the VRF. Try to use less than 20 characters and no spaces.">
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
						Description
					</dt>
					<dd>
						<input type="text"
							style="width: 80%;"
							name="description"
							ng-model="vrf.description"
							uib-tooltip="Enter a short description of what this VRF is used for.">
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
						Tags
					</dt>
					<dd>
						<tags-input ng-model="vrf.tags"></tags-input>
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt>
						Extra Attributes
					</dt>
					<dd>
						<table style="width: 100%;">
							<tbody>
								<tr ng-repeat="avp in vrf.avps">
									<td class="col-md-4" style="padding: 0;">
										<input type="text" style="width: 90%;" ng-model="avp.attribute" ng-required="avp.value"> <b>=</b>
									</td>
									<td class="col-md-7" style="padding: 0;">
										<input type="text" style="width: 100%;" ng-model="avp.value">
									</td>
									<td class="col-md-1">
										<button type="button" class="btn btn-xs btn-danger" ng-click="removeAvp(avp)">
											<span class="glyphicon glyphicon-minus"></span> Remove
										</button>
									</td>
								</tr>
							</tbody>
							<tfoot>
								<tr>
									<td></td>
									<td></td>
									<td>
										<button type="button" class="btn btn-xs btn-success" ng-click="addAvp()">
											<span class="glyphicon glyphicon-plus"></span> Add attribute
									   </button>
									</td>
							</tfoot>
						</table>
					</dd>
				</dl>
			</div>

			<div class="rule"></div>

			<div class="option">
				<dl>
					<dt></dt>
					<dd>
						<button class="btn btn-success" ng-show="method == 'add'">Add VRF</button>
						<button class="btn btn-success" ng-show="method == 'edit'">Save VRF</button>
					</dd>
				</dl>
			</div>
		</div>
	</div>
</form>
